<template>
  <el-container v-if="user !== ''" style="min-height: 100vh">
    <!--头部-->
    <el-header>
          <el-row class="el-row">
            <el-col :span="4" style="font-size: 24px">
              学校后勤管理系统
            </el-col>
            <el-col :span="1">
              <div class="collapseDiv">
                <span :class="collapseBtnClass" style="cursor: pointer" @click="handleCollapse"></span>
              </div>
            </el-col>
            <el-col :span="6" :offset="12" style="display: flex; justify-content: flex-end">
              <el-dropdown trigger="hover">
                <span class="el-dropdown-link" style="color: #409EFF; font-weight: bold;cursor: pointer">
                   {{ user.userName }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="$router.push('/home/user/info')">个人信息</el-dropdown-item>
                  <el-dropdown-item @click.native="$router.push('/home/user/password')">修改密码</el-dropdown-item>
                  <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <div style="margin: 0 15px">
                您的角色: <span style="color: #909399; font-weight: bold">{{ user.role }}</span>
              </div>
            </el-col>
          </el-row>
        </el-header>
    <!--主体-->
    <el-container>
      <!--导航栏-->
      <!--管理员-->
      <el-menu
        v-if="user.role === '管理员'"
        default-active="1-1"
        class="el-menu-vertical-demo"
        background-color="rgb(48,65,86)"
        text-color="#fff"
        :collapse-transition="false"
        :collapse="isCollapse"
        style="min-height: 100%; overflow-x: hidden"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span>用户管理</span>
          </template>
          <el-menu-item index="1-1"><router-link to="/home/user">用户管理</router-link></el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-s-tools"></i>
            <span>报修管理</span>
          </template>
          <el-menu-item index="2-1"><router-link to="/home/service/add">在线报修</router-link></el-menu-item>
          <el-menu-item index="2-2"><router-link to="/home/service">报修审核</router-link></el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-goods"></i>
            <span>物资管理</span>
          </template>
          <el-menu-item index="3-1"><router-link to="/home/goods">物资查询</router-link></el-menu-item>
          <el-menu-item index="3-2"><router-link to="/home/goods/add">物资入库</router-link></el-menu-item>
          <el-menu-item index="3-3"><router-link to="/home/goods/goodsUseRecord">物资记录</router-link></el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-platform-eleme"></i>
            <span>订餐管理</span>
          </template>
          <el-menu-item index="4-1"><router-link to="/home/order/add">我要订餐</router-link></el-menu-item>
          <el-menu-item index="4-2"><router-link to="/home/order">订餐查询</router-link></el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-user-solid"></i>
            <span>商家管理</span>
          </template>
          <el-menu-item index="5-1"><router-link to="/home/merchant/add">新增商家</router-link></el-menu-item>
          <el-menu-item index="5-2"><router-link to="/home/merchant">商家管理</router-link></el-menu-item>
        </el-submenu>
      </el-menu>
      <!--学生-->
      <el-menu
        v-if="user.role === '学生'"
        default-active="1-1"
        class="el-menu-vertical-demo"
        background-color="rgb(48,65,86)"
        text-color="#fff"
        :collapse-transition="false"
        :collapse="isCollapse"
        style="min-height: 100%; overflow-x: hidden"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-platform-eleme"></i>
            <span>订餐</span>
          </template>
          <el-menu-item index="1-1"><router-link to="/home/order/add">我要订餐</router-link></el-menu-item>
          <el-menu-item index="1-2"><router-link to="/home/order">订单记录</router-link></el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-platform-eleme"></i>
            <span>报修</span>
          </template>
          <el-menu-item index="2-1"><router-link to="/home/service/add">申请报修</router-link></el-menu-item>
          <el-menu-item index="2-2"><router-link to="/home/service">报修记录</router-link></el-menu-item>
        </el-submenu>
      </el-menu>
      <!--食堂-->
      <el-menu
        v-if="user.role === '食堂'"
        default-active="2"
        class="el-menu-vertical-demo"
        background-color="rgb(48,65,86)"
        text-color="#fff"
        :collapse-transition="false"
        :collapse="isCollapse"
        style="min-height: 100%; overflow-x: hidden"
      >
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-platform-eleme"></i>
            <span>订餐管理</span>
          </template>
          <el-menu-item><router-link to="/home/order">订单处理</router-link></el-menu-item>
        </el-submenu>
      </el-menu>
      <!--内容-->
      <el-container>
        <el-main class="bg">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import Qs from "qs";
export default {

  name: "HomePage",
  data(){
    return{
      user: {},
      medium : 'medium',
      isCollapse: false,
      collapseBtnClass: 'el-icon-s-fold',
    }
  },
  created() {
    let userStr = sessionStorage.getItem('user') || '{}';
    this.user = JSON.parse(userStr);
    try {
      this.getUserOne();
      if(this.user === ''){
        this.logout();
      }
    }catch (error){
      this.logout();
    }
  },
  methods:{
    logout(){
      sessionStorage.removeItem('user');
      this.$router.push('/login');
    },
    handleCollapse(){
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.collapseBtnClass = 'el-icon-s-unfold';
      } else {
        this.collapseBtnClass = 'el-icon-s-fold';
      }
    },
    getUserOne(){
      this.$http.get('/user/selectOne',{
        params: {
          id: this.user.id
        }
      }).then((response)=>{
        if(response.status === 200){
          if(response.data.code === 10000){
            this.user = response.data.data;
          }
        }
      })
    }
  }
}
</script>

<style scoped>
  .el-header{
    background-color: #2c3e50;
    color: #fff;
    line-height: 60px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  }
  .collapseDiv {
    /*flex: 1;*/
    font-size: 24px;
  }
  .collapseDiv:hover {
    color: #409EFF;
  }
</style>
